<template>
  <div class="app-container home" style="background-color: #eeeeee;">

    <!-- 头部 -->
    <el-row>
      <el-col :span="24">
        <div class="div-1">

          <div class="div1">
            <div class="assetzs">
              <img src="../assets/image/总数.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 18px;">{{useStatus.assetCount}}</p>
              <p style="font-size: 14px;">资产总数</p>
            </div>
          </div>

          <div class="div1">
            <div class="assetje">
              <img src="../assets/image/金额.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 14px;">{{useStatus.assetPriceSum}}</p>
              <p style="font-size: 14px;">资产总额</p>
            </div>
          </div>

          <div class="div1">
            <div class="assetzy">
              <img src="../assets/image/在用资产数量.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 18px;">{{useStatus.zyStatus}}</p>
              <p style="font-size: 14px;">在用资产</p>
            </div>
          </div>

          <div class="div1">
            <div class="assetxz">
              <img src="../assets/image/闲置.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 18px;">{{useStatus.xzStatus}}</p>
              <p style="font-size: 14px;">闲置资产</p>
            </div>
          </div>


          <div class="div1">
            <div class="assetwj">
              <img src="../assets/image/外借.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 18px;">{{useStatus.wjStatus}}</p>
              <p style="font-size: 14px;">外借资产</p>
            </div>
          </div>

          <div class="div1">
            <div class="assetwj">
              <img src="../assets/image/维修.png" />
            </div>
            <div style="margin-left: 10px;">
              <p style="color: black;font-weight: bold;font-size: 18px;">{{useStatus.wxStatus}}</p>
              <p style="font-size: 14px;">维修资产</p>
            </div>
          </div>



        </div>

      </el-col>
    </el-row>

    <!-- 待审核任务 -->
    <el-row>
      <el-col :span="16">
        <div class="div-rw">
          <p style="font-size: 14px;padding-left: 20px;color: #212121;">待审核任务</p>
          <hr style="color: #c5c5c5;" />

          <div style="padding-left: 19px;font-size: 15px;padding-right: 10px;" v-for="(item,inde) in summaryStatuslist" :key="index">
            <p class="p1">
              <span>单号: </span><span style="font-weight: bold;">{{item.code}}, </span><span>制单人: </span><span
                style="font-weight: bold;">{{item.name}}，</span>
              <span>制单时间: </span><span style="font-weight: bold;">{{item.createTame}}</span>
              <div style="display: inline-block;float: right;color: #838383;font-size: 13px;">
                <span v-if="item.type == 1">资产入库</span>
                <span v-if="item.type == 2">资产领用</span>
                <span v-if="item.type == 3">资产退还</span>
                <span v-if="item.type == 4">资产变更</span>
                <span v-if="item.type == 5">资产借用</span>
                <span v-if="item.type == 6">资产调拨</span>
                <span v-if="item.type == 7">资产维修</span>
              </div>
            </p>
            <p style="color: #b9b9b9;font-size: 14px;">2024-02-21 16:23:45</p>
            <hr style="color: #c5c5c5;" />
          </div>
        </div>
      </el-col>

      <!-- 资产现状分析 -->
      <el-col :span="8">
        <div style="background-color: #ffffff;height: 400px;text-align: center;margin-left: 10px;margin-top: 10px;">
          <p style="text-align: left;margin-left: 10px;height: 5%;margin-top: 10px;">资产现状分析</p>
          <div id="chart-container" style="width: 100%;height: 85%;margin-top: 10px;">
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 资产预警列表 -->
    <el-row>
      <el-col :span="24">
        <div class="div-yj">
          <p style="font-size: 14px;padding-left: 20px;color: #212121;">资产预警列表</p>
          <hr />
          <div>
            <el-table :data="assetLists">
              <el-table-column label="预警时间" align="center" prop="expirationDate" />
              <el-table-column label="资产名称" align="center" prop="assetName" />
              <el-table-column label="资产编码" align="center" prop="assetCode" />
              <el-table-column label="使用状态" align="center" prop="useStatus">
                <template slot-scope="scope">
                  <span v-if="scope.row.useStatus == 4">闲置</span>
                  <span v-if="scope.row.useStatus == 100">在用</span>
                  <span v-if="scope.row.useStatus == 101">借用</span>
                  <span v-if="scope.row.useStatus == 102">处置</span>
                  <span v-if="scope.row.useStatus == 103">维修</span>
                  <span v-if="scope.row.useStatus == 104">报废</span>
                </template>
              </el-table-column>
              <el-table-column label="超时天数" align="center" prop="num">
                <template slot-scope="scope">
                  <span>{{scope.row.num}}天</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>

     <!-- <el-col :span="8">
        <div style="height: 400px;text-align: center;margin-top: 10px;margin-left: 10px;">
          <div style="height: 100%;">
            <el-card shadow="hover" style="width: 100%;height: 100%;">
              <div slot="header" class="clearfix">
                <span>文嘉《明日歌》</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
              </div>
              <div style="font-size: 18px;text-align: center; margin-top: 35px;">
                明日复明日
              </div>
              <div style="font-size: 18px;text-align: center;">明日何其多</div>
              <div style="font-size: 18px;text-align: center;">我生待明日</div>
              <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
              <div style="margin-top: 35px;"></div>
              <el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日："
                time-indices>
              </el-statistic>
            </el-card>
          </div>
        </div>
      </el-col> -->
    </el-row>


  </div>
</template>

<script>
  import {
    queryEamDateList,
  } from "@/api/eam-wx/stock"
  import {
    assetCount,
    getUseStatus,
    assetCounts,
    assetPriceSum,
    summaryStatuslist
  } from "@/api/eam-wx/asset"
  import * as echarts from 'echarts';
  import {
    ref,
    computed
  } from 'vue';
  import {
    ZRender
  } from 'zrender';
  export default {
    name: "Index",
    data() {
      return {
        // 版本号
        version: "3.6.4",
        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
        assetLists: [],
        expirationDays: [],
        useStatus: {
          zyStatus: '',
          xzStatus: '',
          wjStatus: '',
          assetCount: '',
          assetPriceSum: '',
          wxStatus:''
        },
        test: '',
        price:'',
        zy:'',
        xz:'',
        wj:'',
        wx:'',
        summaryStatuslist:[],
      };
    },
    mounted() {
      setTimeout(() => {
        // 资产现状分析
        var dom = document.getElementById('chart-container');
        var myChart = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false,
        });
        var app = {};
        var option;
        option = {
          legend: {
            top: 'bottom'
          },
          legend: {
            itemWidth: 6,
            itemHeight: 14,
            textStyle: {
              fontSize: "12"
            },
            width: 50,
            x: 'left',
            left: "2%",
            data: ['资产总数', '维修资产', '在用资产', '闲置资产', '外借资产']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          series: [{
            name: '资产现状分析数据',
            type: 'pie',
            radius: '40%',
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              normal: {
                show: true,
                formatter: e => {
                  return `(${e.value})`
                }
              }
            },
            data: [{
                value: this.test,
                name: '资产总数'
              },
              {
                value: this.wx,
                name: '维修资产'
              },
              {
                value: this.zy,
                name: '在用资产'
              },
              {
                value: this.xz,
                name: '闲置资产'
              },
              {
                value: this.wj,
                name: '外借资产'
              },

            ]
          }],
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
        //资产类型占比

      }, 1500)
    },
    created() {
      this.getAssetCounts()

      summaryStatuslist().then(res=>{
        this.summaryStatuslist = res.rows;
      })

      setTimeout(() => {
        this.getAssetList();
        this.getAssetZyUseStatus()
        this.getAssetXzUseStatus()
        this.getAssetWjUseStatus()
        this.getAssetWxUseStatus()
        this.getAssetPriceSum()
      }, 800)


    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      /** 查询固定资产列表 */
      getAssetList() {
        queryEamDateList().then(res => {
          this.assetLists = res.rows;
        })
      },
      getAssetZyUseStatus() { //在用资产数量
        let useStatus = 100;
        getUseStatus(useStatus).then(res => {
          this.useStatus.zyStatus = res.data;
          this.zy = res.data;
        })
      },
      getAssetXzUseStatus() { //闲置资产数量
        let useStatus = 4;
        getUseStatus(useStatus).then(res => {
          this.useStatus.xzStatus = res.data;
          this.xz = res.data;
        })
      },
      getAssetWjUseStatus() { //外借资产数量
        let useStatus = 101;
        getUseStatus(useStatus).then(res => {
          this.useStatus.wjStatus = res.data;
          this.wj = res.data;
        })
      },
      getAssetWxUseStatus() { //维修资产数量
        let useStatus = 103;
        getUseStatus(useStatus).then(res => {
          this.useStatus.wxStatus = res.data;
          this.wx = res.data;
        })
      },
      getAssetCounts() { //资产总数量
        assetCounts().then(res => {
          this.useStatus.assetCount = res.data;
          this.test = res.data
          //alert(JSON.stringify(this.test))
        })
      },
      getAssetPriceSum() { //资产金额总数
        assetPriceSum().then(res => {
          this.useStatus.assetPriceSum = res.data;
          this.price = res.data
        })
      },
      audit() {

      },
      hilarity() {
        this.$notify({
          title: "提示",
          message: "时间已到",
          duration: 0,
        });
      },
      clickFn() {
        this.$refs.statistic.suspend(this.stop);
        this.stop = !this.stop;
      },

    }
  };
</script>

<style scoped lang="scss">
  #chart-container {
    position: relative;
    overflow: hidden;
  }

  img {
    height: 30px;
    margin-top: 3px;
  }

  .assetzs {
    width: 40px;
    height: 40px;
    background-color: #b4e3ff;
    border-radius: 30px;
    text-align: center;
  }

  .assetje {
    width: 40px;
    height: 40px;
    background-color: #ffefdf;
    border-radius: 50px;
    text-align: center;
  }

  .assetzy {
    width: 40px;
    height: 40px;
    background-color: #f3e7fc;
    border-radius: 50px;
    text-align: center;
  }

  .assetxz {
    width: 40px;
    height: 40px;
    background-color: #a7bad1;
    border-radius: 50px;
    text-align: center;
  }

  .assetwj {
    width: 40px;
    height: 40px;
    background-color: #dffdff;
    border-radius: 50px;
    text-align: center;
  }

  .assetwx {
    width: 40px;
    height: 40px;
    background-color: #e3ffeb;
    border-radius: 50px;
    text-align: center;
  }

  .div1 {
    margin-right: 40px;
    padding-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .div-1 {
    background-color: #ffffff;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
  }

  .div-rw {
    background-color: #ffffff;
    height: 400px;
    text-align: center;
    margin-top: 10px;
    overflow-y: auto;
    text-align: left;
  }

  .div-yj {
    background-color: #ffffff;
    height: 400px;
    text-align: center;
    margin-top: 10px;
    overflow-y: auto;
    text-align: left;
  }

  .but1 {
    height: 30px;
    border-radius: 5px;
    background-color: #ffffff;
    margin-left: 150px;
  }


</style>
